<template>
  <div class="userInfo">
    <van-nav-bar
      title="个人资料"
      left-arrow
      @click-left="$router.back()"
    />
    <input type="file" hidden ref="file" @change="getAvatar">
    <van-cell title="头像" value="内容" is-link center @click="$refs.file.click()">
      <van-image
      class="userImg"
      width="30"
      height="30"
      fit="cover"
      :src="userInfo.photo"
      />
    </van-cell>
    <van-cell title="用户名" :value="userInfo.name" is-link center @click="(isUsernameShow=true)"/>
    <van-cell title="性别" :value="(userInfo.gender === 0? '男': '女')" is-link center @click="(isGenderShow=true)"/>
    <van-cell title="生日" :value="userInfo.birthday" is-link center @click="isBirthdayShow=true"/>
    <!-- 头像修改 -->
    <van-popup v-model="isAvatarShow" :style="{ height: '100%' ,width: '100%'}">
      <modify-photo 
      v-if="isAvatarShow" 
      :imgSrc="imgSrc" 
      @close="isAvatarShow=false"
      @updateSuccess="userInfo.photo=$event"
      />
    </van-popup>
    <!-- 用户名修改 -->
    <van-popup v-model="isUsernameShow" :style="{ height: '100%' ,width: '100%'}" class="pop">
      <ModifyUsername 
      @close="isUsernameShow=false"
      v-model="userInfo.name"
      />
    </van-popup>
    <!-- 性别修改 -->
    <van-popup v-model="isGenderShow" :style="{ width: '100%'}" class="pop" position="bottom">
      <modify-gender v-if="isGenderShow" @close="isGenderShow=false" v-model="userInfo.gender" />
    </van-popup>
    <!-- 修改生日 -->
    <van-popup v-model="isBirthdayShow" :style="{ width: '100%'}" class="pop" position="bottom">
      <modify-birth v-if="isBirthdayShow" @close="isBirthdayShow=false" v-model="userInfo.birthday" />
    </van-popup>
  </div>
</template>

<script>
import {getUserInfoAPI} from '@/api'
import ModifyUsername from './components/ModifyUsername'
import ModifyGender from './components/ModifyGender'
import ModifyBirth from './components/ModifyBirth'
import ModifyPhoto from './components/ModifyPhoto'

export default {
name: 'ModifyUserInfo',
components:{
  ModifyUsername,
  ModifyGender,
  ModifyBirth,
  ModifyPhoto
},
data(){
  return {
    userInfo: {},
    isUsernameShow: false,
    isGenderShow: false,
    isBirthdayShow: false,
    isAvatarShow: false,
    imgSrc: ''
  }
},
methods: {
  async getUserInfo(){
    try {
      const {data:{data}} =await getUserInfoAPI()
      this.userInfo = data
    } catch (error) {
      this.$toast('获取信息失败，请稍后重试')
    }
  },
  getAvatar(){
    //获取文件对象
    let files = this.$refs.file.files
    console.log(files);
    // console.dir(files);
    // 获取blob数据
    if(files.length > 0){
      this.imgSrc = window.URL.createObjectURL(files[0])
      // console.log(typeof(this.imgSrc));
      // console.log(url);
      this.isAvatarShow=true
    }
  }
},
created(){
  this.getUserInfo()
},
}
</script>

<style scoped lang="less">
.userInfo{
  /deep/ .van-nav-bar {
    .van-icon{
      color: #fff;
    }
  }
  .userImg{
    overflow: hidden;
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  .pop{
    background-color: #edeff3;
  }
}
</style>